<template>
    <el-button circle size="small" style="margin-right: 10px" @click="getAphorism">
        <el-icon>
            <Refresh/>
        </el-icon>
    </el-button>
    <span style="color: #979ba1">{{ aphorism.content }}</span>
    <span v-if="aphorism.author" style="margin-left: 30px;color: #979ba1"> -- {{ aphorism.author }}</span>
    <div class="flex-grow"/>
    <el-tooltip
            effect="light"
            content="返回前端首页"
            placement="bottom">
        <el-button circle @click="router.push({name:'index'})">
            <el-icon>
                <Monitor/>
            </el-icon>
        </el-button>
    </el-tooltip>
    <el-tooltip
            effect="light"
            content="修改密码"
            placement="bottom">
        <el-button circle @click="dialogVisible = true">
            <el-icon>
                <Lock/>
            </el-icon>
        </el-button>
    </el-tooltip>
    <el-tooltip
            effect="light"
            content="退出登录"
            placement="bottom">
        <el-button circle @click="logout">
            <el-icon>
                <SwitchButton/>
            </el-icon>
        </el-button>
    </el-tooltip>

    <img :src="store.getHeaderImg" class="headImg">
    <p> {{ store.userInfo.userNickName }}</p>

  <!-- 修改密码弹出框 -->
    <el-dialog
            v-model="dialogVisible"
            title="修改密码"
            width="30%"
            :before-close="handleClose">
        <el-form ref="formRef"
                 :model="passwordMap"
                 :rules="rules"
                 label-width="80px">
            <el-form-item label="旧密码" prop="oldPassword">
                <el-input v-model="passwordMap.oldPassword" type="text" minlength="6"
                          show-word-limit/>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
                <el-input v-model="passwordMap.newPassword" type="text" minlength="6"
                          show-word-limit/>
            </el-form-item>

        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="editPassword">
          保存
        </el-button>
        <el-button @click="handleClose">取消</el-button>
      </span>
        </template>
    </el-dialog>

</template>

<script>
import pinia from "@/store/pinia";
import userStore from "@/store/UserStore";
import {Refresh} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";

const store = userStore(pinia);

export default {
    name: "Header",
    methods: {
        logout() {
            window.sessionStorage.removeItem("userInfo")
            window.sessionStorage.removeItem("token")
            store.resetUserInfo()
            this.$router.push({name: "index"})
        },
        async getAphorism() {
            let {data: result} = await this.$http.get("/api/aphorism/getOne", {params: {id: this.aphorism.id}})
            if (result.code === 200) {
                this.aphorism = result.dataMap.aphorism
            } else {
                ElMessage.error({showClose: true, message: result.msg})
            }
        },
        async editPassword() {
            let {data: result} = await this.$http.post("/api/user/editPassword", this.passwordMap)
            if (result.code === 200) {
                this.handleClose()
                ElMessage.success({showClose: true, message: result.msg})
            } else {
                ElMessage.error({showClose: true, message: result.msg})
            }
        },
        handleClose() {
            this.dialogVisible = false
            this.$refs.formRef.resetFields()
            this.passwordMap = {
                oldPassword: '',
                newPassword: ''
            }
        }
    },
    created() {
        this.getAphorism()
    },
    data() {
        return {
            store, Refresh,
            router: this.$router,
            aphorism: {
                id: 0,
                content: "辛勤的蜜蜂永远没有时间悲哀。",
                author: "布莱克"
            },

            dialogVisible: false,
            passwordMap: {
                oldPassword: '',
                newPassword: ''
            },
            rules: {
                oldPassword: [
                    {required: true, message: '请输入旧密码', trigger: 'blur'},
                    {min: 6, max: 32, message: '用户名长度应该大于6位', trigger: 'blur'},
                ],
                newPassword: [
                    {required: true, message: '请输入新密码', trigger: 'blur'},
                    {min: 6, max: 32, message: '用户名长度应该大于6位', trigger: 'blur'},
                ],
            },
        }
    },
}
</script>

<style scoped>
.flex-grow {
    flex-grow: 1;
    height: 40px;
}

.headImg {
    height: 25px;
    border-radius: 50%;
    border: 1px solid #6fe7c8;
    margin-right: 10px;
    margin-left: 10px
}
</style>